<template>


    <a-card title="图片素材列表">

        <a-dropdown slot="extra">
            <a-menu slot="overlay">
                <a-menu-item key="1">
                    <a-icon type="upload"/>
                    <a-upload
                             name="file"
                            :showUploadList="false"
                            :before-upload="beforeUpload"
                            @change="uploadHander"
                            :customRequest="customRequest"
                    >上传新图片
                    </a-upload>
                </a-menu-item>
                <a-menu-divider/>
                <a-menu-item key="2" @click="syncMaterial">
                    <a-icon type="download"/>
                    同步素材库
                </a-menu-item>

            </a-menu>
            <a-button type="danger" style="margin-left: 8px">新增图片素材<a-icon type="down"/></a-button>
        </a-dropdown>


        <a-list :grid="{ gutter:12, column: 6 }"
                :loading="ListLoading"
                :pagination="pagination"
                :data-source="dataSource">


            <a-list-item slot="renderItem" slot-scope="item, index">


                <a-card :hoverable="true">
                    <div slot="cover"
                         :style="{backgroundImage: 'url('+item.mediaUrl+')', height:'150px'}"
                         class="MaterialimgBox">

                    </div>
                    <a-card-meta :title="item.mediaName"/>
                    <template slot="actions" class="ant-card-actions">
                        <a :href="item.mediaUrl" target="_blank">
                            <a-icon type="file-image"/>
                            原图</a>
                        <span @click="deleteMaterial(item.mediaId)"><a-icon type="delete"/>删除</span>
                    </template>
                </a-card>


            </a-list-item>
        </a-list>


    </a-card>


</template>

<script>
    import {pagination} from '../../../public/colums.js';
    import {materialList, addFileMaterial, deleteMaterial,syncMaterialFile} from '../../../public/http.js';


    export default {
        props: ['mediaType'],


        data() {
            return {
                upLoading: false,
                ListLoading: false,
                dataSource: [],
                pagination: {

                    ...pagination,
                    pageSize: 12,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getMaterialList();
                    }
                },
                loading: false, //表格loading
                searchData: {mediaType: this.mediaType}


            };
        },
        methods: {
            //同步公众平台内的图片素材
            syncMaterial(){
                this.ListLoading=true;
                syncMaterialFile(this.mediaType).then(res=>{
                    this.$exMod.ajaxMessage(res);
                    this. getMaterialList();
                });
                this.ListLoading=false;
            },

            //自定义上传方法
            customRequest(data) {
                this.upLoading = true;
                const formData = new FormData();
                formData.append('file', data.file);
                formData.append("mediaType", this.mediaType);


                addFileMaterial(formData).then((res) => {

                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getMaterialList();
                    }
                    this.upLoading = false;
                })


            },

            beforeUpload(file) {
                const allowTye = ['bmp', 'png', 'jpeg', 'jpg', 'gif'];
                const fileType = file.type.split("/");
                const chekType = allowTye.findIndex((value, index, arr) => {
                    return value === fileType[1]
                });
                if (chekType < 0) {

                    this.$notification['error']({
                        message: '图片素材添加失败',
                        description: '图片素材只允许上传bmp,png、jpeg、jpg、gif格式的图片'
                    });
                    return false;
                }


                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$notification['error']({message: '图片素材添加失败', description: "图片素材的大小不能超过 2MB!"});
                    return false;
                }
                return true
            },

            //山川监听
            uploadHander(info) {

                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },

            //1.0 获取表格数据
            getMaterialList() {
                this.ListLoading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchData); //删除对象中的空值
                materialList(this.pagination, searchData).then(res => {
                    this.ListLoading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },

            deleteMaterial(mediaId) {

                const _this = this;
                this.$confirm({
                    width: 350,
                    title: `确定要删除这个图片素材吗?`,

                    onOk() {
                        deleteMaterial(mediaId).then(res => {
                            _this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                _this.getMaterialList();
                            }
                        })
                    },
                });


            }


        },
        created() {
            this.getMaterialList();
        }

    }

</script>


